<template>
  <div class="table-form-container">
    <div class="divide-title">表格表单</div>

    <base-input-group v-model="inputGroupValue" :prepend-options="inputGroupOptions" @change="inputGroupChange"></base-input-group>

    <div class="form-wrapper">
      <table-form
        ref="tableFormRef"
        :data-source="tableFormList"
        :columns="columns"
        :disabled="disabled"
        action-width="150"
      >
        <template #props="scope">
          <TableFormItemProp v-model="scope.row.props" :field-type="scope.row.fieldType"></TableFormItemProp>
        </template>

        <template #validate="scope">
          <TableFormItemValidate v-model="scope.row.validate" :field-type="scope.row.fieldType"></TableFormItemValidate>
        </template>
      </table-form>
    </div>

    <el-button @click="onSubmit">提交</el-button>
  </div>
</template>

<script>
import _ from 'lodash';
import TableFormItemProp from './table-form-item-config/table-form-item-prop';
import TableFormItemValidate from './table-form-item-config/table-form-item-validate';

export default {
  name: 'custom-table-form',
  components: {
    TableFormItemProp,
    TableFormItemValidate,
  },
  data() {
    const columns = this.$store.getters['example/fieldColumns'].length > 0 ? this.$store.getters['example/fieldColumns'] : [{
      fieldType: 'input',
    }];
    return {
      inputGroupValue: ['max', ''],
      inputGroupOptions: [
        { value: 'required', label: '必填' },
        { value: 'max', label: '最大长度' },
        { value: 'min', label: '最小长度' },
      ],
      tableFormList: _.cloneDeep(columns),
      columns: [
        {
          dataIndex: 'fieldName',
          title: '字段名称',
          formAttribute: {
            fieldType: 'input',
            props: { clearable: true },
            validate: [
              { required: true, message: '请输入', trigger: 'blur' },
              { max: 50, message: '字段名称长度不能超过50' },
              // { pattern: /^[a-zA-Z]?.$/, message: '字段名称只能输入驼峰式或下划线连接的形式', trigger: 'blur' },
            ],
          },
        },
        {
          dataIndex: 'label',
          title: '字段描述',
          formAttribute: {
            fieldType: 'input',
            props: { clearable: true, maxlength: 50 },
            validate: [{ required: true, message: '请输入', trigger: 'blur' }],
          },
        },
        {
          dataIndex: 'fieldType',
          title: '字段类型',
          formAttribute: {
            fieldType: 'select',
            options: [
              { value: 'input', label: '单行文本' },
              { value: 'textarea', label: '多行文本' },
              { value: 'select', label: '下拉选择' },
              { value: 'select-dictionary', label: '下拉选择字典' },
            ],
            props: { clearable: true, placeholder: '请选择字段类型' },
            validate: [{ required: true, message: '请选择', trigger: 'change' }],
          },
        },
        {
          dataIndex: 'props',
          title: '表单组件属性配置',
          scopedSlots: { customRender: 'props' },
        },
        {
          dataIndex: 'validate',
          title: '校验规则',
          scopedSlots: { customRender: 'validate' },
        },
      ],
      disabled: false,
    };
  },

  methods: {
    inputGroupChange() {
      console.log('input group change => ', JSON.parse(JSON.stringify(this.inputGroupValue)));
    },
    onSubmit() {
      this.$refs['tableFormRef'].validate(valid => {
        if (valid) {
          this.$store.dispatch('example/setDynamicFieldColumns', this.tableFormList);
          this.$message.success('保存成功!');
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.table-form-container {
  width: 100%;

  .form-wrapper {
    width: 1600px;
    height: 300px;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
